import React from "react";
import { SettingO, ArrowLeft } from "@react-vant/icons";
import IconFont from "../publics/JjtIcon";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { useState, useEffect } from "react";
//我的
export default function MyApp() {
  let navigate = useNavigate();
  //获取预约信息
  let [appointmentData, setAppointmentData] = useState([]);
  //收藏信息
  let [collectData, setCollectData] = useState([]);
  let uid = localStorage.getItem("_id")
  let getAppointmentData = async () => {
    let {data} = await axios.get("http://localhost:3000/jjt/getAppointment",{params:{uid}});
    let res = await axios.get("http://localhost:3000/jjt/getCollect");
    setAppointmentData(data);
    
    setCollectData(res.data.filter(item=>item.uid===uid));
    setAppointmentData(data)
    console.log(data)
  }
  useEffect(() => {
    getAppointmentData();
  },[])
  return (
    <div className="jjtmayapp">
      
      <div className="jjtmayapptitle">
        <div className="jjtmayapptitleleft">
        <ArrowLeft className="jjtmayappuserarrow" onClick={()=>{navigate("/")}}></ArrowLeft>
        </div>
        <div className="jjtmayapptitleright">
          <SettingO></SettingO>
        </div>
      </div>
      <div className="jjtmayappuser">
        <div className="jjtmayappuserleft">
          <img src={require("../../staticfile/userimg.jpg")} alt=""></img>
        </div>
        <div className="jjtmayappusermid">
          <p className="jjtmayappusername">一闪一闪亮晶晶</p>
          <p className="jjtmayappuserid">ID:1484515484515184</p>
        </div>
        <div className="jjtmayappuserright">
          <ArrowLeft className="jjtmayappuserarrow" onClick={()=>{navigate("/personal4")}}></ArrowLeft>
        </div>
      </div>
      <div className="jjtmayappstate">
        <div  onClick={()=>{navigate("/mycollect4")}}>
          <p className="jjtmayappstatep">{collectData.length}</p>
          <p>我的收藏</p>
        </div>
        <div>
          <p className="jjtmayappstatep">{appointmentData.length}</p>
          <p onClick={()=>{navigate("/appointment")}}>预约记录</p>
        </div>
        <div>
          <p className="jjtmayappstatep">51</p>
          <p onClick={()=>{navigate("/history4")}}>浏览历史</p>
        </div>
      </div>
      <div className="jjtmayappcon">
        <div className="jjtmayappcondetail">
            <div className="jjtmayappcondetail1"><IconFont type={"icon-fangchan-"} style={{fontSize:"20px"}}></IconFont></div>
            <div className="jjtmayappcondetail2" onClick={()=>{navigate("/myhomes4")}}>我的房源</div>
            <div className="jjtmayappcondetail3">
            <span style={{color:"gray"}}>有{appointmentData.length}条预约申请</span>
            <ArrowLeft className="jjtmayappuserarrow"></ArrowLeft></div>
        </div>
        <div className="jjtmayappcondetail">
            <div className="jjtmayappcondetail1"><IconFont type={"icon-tongqin1"} style={{fontSize:"20px"}}></IconFont> </div>
            <div className="jjtmayappcondetail2">设置通勤地</div>
            <div className="jjtmayappcondetail3">
            {/* <span>有2条预约申请</span> */}
            <ArrowLeft className="jjtmayappuserarrow"></ArrowLeft></div>
        </div>
        <div className="jjtmayappcondetail">
            <div className="jjtmayappcondetail1"><IconFont type={"icon-shimingrenzheng"} style={{fontSize:"15px"}}></IconFont> </div>
            <div className="jjtmayappcondetail2">实名认证</div>
            <div className="jjtmayappcondetail3">
            {/* <span>有2条预约申请</span> */}
            <ArrowLeft className="jjtmayappuserarrow"></ArrowLeft></div>
        </div>
        {/* <div className="jjtmayappcondetail">
            <div className="jjtmayappcondetail1"><IconFont type={"icon-miandarao1"} style={{fontSize:"23px"}}></IconFont> </div>
            <div className="jjtmayappcondetail2">免打扰设置</div>
            <div className="jjtmayappcondetail3">
            <span>有2条预约申请</span>
            <ArrowLeft className="jjtmayappuserarrow"></ArrowLeft></div>
        </div> */}
        <div className="jjtmayappcondetail">
            <div className="jjtmayappcondetail1"><IconFont type={"icon-lianxikefu1"} style={{fontSize:"20px"}}></IconFont> </div>
            <div className="jjtmayappcondetail2">联系客服</div>
            <div className="jjtmayappcondetail3">
            {/* <span>有2条预约申请</span> */}
            <ArrowLeft className="jjtmayappuserarrow"></ArrowLeft></div>
        </div>
        <div className="jjtmayappcondetail">
            <div className="jjtmayappcondetail1"><IconFont type={"icon-Opinion"} style={{fontSize:"20px"}}></IconFont> </div>
            <div className="jjtmayappcondetail2">意见反馈</div>
            <div className="jjtmayappcondetail3">
            {/* <span>有2条预约申请</span> */}
            <ArrowLeft className="jjtmayappuserarrow"></ArrowLeft></div>
        </div>
      </div>
    </div>
  );
}
